/**
 * 匹配结果 收件与非收派两个的结果显示
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>匹配结果</el-breadcrumb-item>
    </el-breadcrumb>
    <h1  v-if="hasNoResult" class="titleStyle">
      <i class="el-icon-warning" style="color:red;"></i>
      无匹配结果
    </h1>
    <!-- 表格 -->
    <div v-if="hasResult" style="margin-left:150px; margin-top:50px;">
      <el-table
        :data="tempList"
        header-cell-style="color:red;background:lightblue;"
        style="width: 1130px"
        @cell-click="clickItem"
      >
        <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
        <el-table-column prop="workNumber" label="员工工号" width="150" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80" align="center"></el-table-column>
        <el-table-column prop="workType" label="用工类型" width="120" align="center"></el-table-column>
        <el-table-column
          prop="weightType"
          label="重量类型"
          width="150"
          align="center"
          v-if="showWeight"
        ></el-table-column>
        <el-table-column prop="vehicle" label="交通工具" width="120" align="center"></el-table-column>
        <el-table-column prop="skills" label="技能标签" width="200" align="center"></el-table-column>
        <el-table-column prop="score" label="得分" width="80" align="center"></el-table-column>
        <el-table-column prop="pendingTask" label="待处理" width="80" align="center" ></el-table-column>
      </el-table>
      <!--底下的页码组件-->
      <div>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <!-- 弹出的dialog表格的按钮 -->
      <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
      <!-- 弹出的dialog表格 -->
      <el-dialog title="待处理任务" :visible.sync="dialogTableVisible">
        <el-table :data="dialogTableData">
          <el-table-column property="taskType" label="任务类型" width="120"></el-table-column>
          <el-table-column property="taskAddress" label="地址" width="200"></el-table-column>
          <el-table-column property="taskBeginTime" label="开始日期时间" width="200"></el-table-column>
          <el-table-column property="taskEndTime" label="结束日期时间"></el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <div>
      <el-button
        type="primary"
        @click="returnToOrder"
        style="margin-left:180px; float:left;"
      >返回到输入页面</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasNoResult:true,//查询结果没值，显示“没有查询结果”
      hasResult:false,//查询结果有值，显示各类表格组件
      tableType: "", //是收件结果 值为"1"，还是非收派结果,值为"2"
      showWeight: true, //是否显示重量列参数
      total: 1, // 总数据条数
      pageSize: 10, //每页显示数据条数
      currentPage: 1, //当前页数
      tableData: [
        //所有的数据源
      ],
      tempList: [], //作为每一页显示的数据源，在<=10时，与tableData没本质区别
      dialogTableVisible: false,
      dialogTableData: []
    };
  },
  /**
   * 创建完毕
   */
  created() {
    this.getData();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    clickItem(row, column, cell, event){
    console.log(column.id);
    //如何处理表格内文字的点击事件就靠这个来了，但是如何具体使用它的参数，我目前处理不了，看你了。
    },
    returnToOrder() {
      console.log();
      //1.是否清除这次订单查询的结果数据（如果有保存的话）
      //2.返回后订单输入状态是否清空的问题
      //3.跳转
    },
    //改变页码的时候调用该方法 step.1
    handleCurrentChange1: function(currentPage) {
      this.currentPage = currentPage;
      this.currentChangePage(this.tableData, currentPage);
    },
    //currentChange的子方法 step.2
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize;
      let to = currentPage * this.pageSize;
      this.tempList = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from]);
        }
      }
    },
    //在加载数据时获取数据，目前是模拟获取
    getData() {
      //本地模拟数据读取
      let res = {
        hasResult:true,//是否有返回结果
        count: 11,
        tableType: "1",
        pendingTaskDetail: [
          {
            taskType: "收件",
            taskAddress: "xxxxx省xxxx市",
            taskBeginTime: "1999/12/31 22:59",
            taskEndTime: "1999/12/31 23:59"
          }
        ],
        data: [
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          },
          {
            name: "王小虎",
            workNumber: "01387226",
            gender: "male",
            workType: "allDay",
            weightType: "SF-0-130KG",
            vehicle: "bike",
            skills: ["金牌销售", "速运之星"],
            score: "66",
            pendingTask: "1"
          }
        ]
      };
      this.hasNoResult=!res.hasResult;
      this.hasResult=res.hasResult;
      this.total = res.count;
      this.tableData = res.data;
      this.tableType = res.tableType;
      //这里注意一下这个待处理任务表格，这里处理代商榷
      this.dialogTableData = res.pendingTaskDetail;
      if (res.tableType == "1") {
        this.showWeight = true;
      } else {
        this.showWeight = false;
      }
      for (let i = 0; i < res.count; i++) {
        if (this.tableData[i]) {
          this.tempList.push(this.tableData[i]);
        }
      }
    }
    //本地模拟输入到此，然后是网络输入
    // 通过网络获取数据的方法,交给你了，不少的异常处理
  }
};
</script>

<style scoped>
.titleStyle {
  color: rgb(0, 0, 0);
  height: 600px;
  text-align: center;
  font-size: 65px;
  line-height: 600px;
}
</style>

 